<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="/lib/layui/css/layui.css"  media="all">
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<div class="layui-row layui-col-space30 layui-col-xs6 layui-col-md4" id="demo-box">
  <div >
    <div class="layui-panel">
      <ul class="layui-menu" id="classification">
        <li lay-options="{id: 100,title:'A'}">
          <div class="layui-menu-body-title">马克思主义、列宁主义、毛泽东思想、邓小平理论</div>
        </li>
        <li lay-options="{id: 101,title:'B'}">
          <div class="layui-menu-body-title">哲学、宗教</div>
        </li>
        <li lay-options="{id: 102,title:'C'}">
          <div class="layui-menu-body-title">社会科学总论</div>
        </li>
        <li lay-options="{id: 103,title:'D'}">
          <div class="layui-menu-body-title">政治、法律</div>
        </li>
        <li lay-options="{id: 104,title:'E'}">
          <div class="layui-menu-body-title">军事</div>
        </li>
        <li lay-options="{id: 105,title:'F'}">
          <div class="layui-menu-body-title">经济</div>
        </li>
        <li lay-options="{id: 106,title:'G'}">
          <div class="layui-menu-body-title">文化、科学、教育、体育</div>
        </li>
        <li lay-options="{id: 107,title:'H'}">
          <div class="layui-menu-body-title">语言、文字</div>
        </li>
        <li lay-options="{id: 108,title:'I'}">
          <div class="layui-menu-body-title">文学</div>
        </li>
        <li lay-options="{id: 109,title:'J'}">
          <div class="layui-menu-body-title">艺术</div>
        </li>
        <li lay-options="{id: 110,title:'K'}">
          <div class="layui-menu-body-title">历史、地理</div>
        </li>
        <li lay-options="{id: 111,title:'N'}">
          <div class="layui-menu-body-title">自然科学总论</div>
        </li>
        <li lay-options="{id: 112,title:'O'}">
          <div class="layui-menu-body-title">数理科学和化学</div>
        </li>
        <li lay-options="{id: 113,title:'P'}">
          <div class="layui-menu-body-title">天文学、地球科学</div>
        </li>
        <li lay-options="{id: 114,title:'Q'}">
          <div class="layui-menu-body-title">生物科学</div>
        </li>
        <li lay-options="{id: 115,title:'R'}">
          <div class="layui-menu-body-title">医药、卫生</div>
        </li>
        <li lay-options="{id: 116,title:'S'}">
          <div class="layui-menu-body-title">农业科学</div>
        </li>
        <li lay-options="{id: 117,title:'T'}">
          <div class="layui-menu-body-title">工业技术</div>
        </li>
        <li lay-options="{id: 118,title:'U'}">
          <div class="layui-menu-body-title">交通运输</div>
        </li>
        <li lay-options="{id: 119,title:'V'}">
          <div class="layui-menu-body-title">航空、航天</div>
        </li>
        <li lay-options="{id: 120,title:'X'}">
          <div class="layui-menu-body-title">环境科学、安全科学</div>
        </li>
        <li lay-options="{id: 121,title:'Z'}">
          <div class="layui-menu-body-title">综合性图书</div>
        </li>
      </ul>
    </div>
  </div>
</div>
<div class="layui-col-xs12 layui-col-md8">
  <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>
  <script type="text/html" id="currentTableBar">
    <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="detail">详情</a>
  </script>
</div>


<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
<script>
  layui.use(['dropdown', 'util', 'table', 'miniPage'], function(){
    var dropdown = layui.dropdown
            ,util = layui.util
            ,$ = layui.jquery,
            table = layui.table,
            miniPage = layui.miniPage;

    //菜单点击事件
    dropdown.on('click(classification)', function(options){
      var thisElem = $(this);
      console.log(thisElem, options);
      var table = layui.table;
      var type = options.title;
      table.render({
        elem: '#currentTableId',
        url: '/visitorBooksInfo?type='+type,
        toolbar: '#toolbarDemo',
        defaultToolbar: ['filter', 'exports', 'print', {
          title: '提示',
          layEvent: 'LAYTABLE_TIPS',
          icon: 'layui-icon-tips'
        }],
        cols: [
          [
            {field: 'id', width: 80, title: '编号', sort: true},
            {field: 'name', width: 280, title: '书名', sort: true},
            {field: 'alias', width: 280, title: '别名', sort: true},
            {field: 'author', width: 150,title: '作者', sort: true},
            {field: 'publishingHouse', width: 150, title: '出版社', sort: true},
            {field: 'score', width: 80, title: '评分', minWidth: 40, sort: true},
            {title: '操作', minWidth: 100, toolbar: '#currentTableBar', align: "center"}]
        ],
        limits: [10, 15, 20, 25, 50, 100],
        limit: 15,
        page: true,
        skin: 'line'
      });
    });
    table.render({
      elem: '#currentTableId',
      url: '/visitorBooksInfo',
      toolbar: '#toolbarDemo',
      defaultToolbar: ['filter', 'exports', 'print', {
        title: '提示',
        layEvent: 'LAYTABLE_TIPS',
        icon: 'layui-icon-tips'
      }],
      cols: [
        [
          {field: 'id', width: 80, title: '编号', sort: true},
          {field: 'name', width: 280, title: '书名', sort: true},
          {field: 'alias', width: 280, title: '别名', sort: true},
          {field: 'author', width: 150,title: '作者', sort: true},
          {field: 'publishingHouse', width: 150, title: '出版社', sort: true},
          {field: 'score', width: 80, title: '评分', minWidth: 40, sort: true},
          {title: '操作', minWidth: 100, toolbar: '#currentTableBar', align: "center"}]
      ],
      limits: [10, 15, 20, 25, 50, 100],
      limit: 15,
      page: true,
      skin: 'line'

    });
    table.on('tool(currentTableFilter)', function (obj) {
      var data = obj.data;
      if (obj.event === 'detail') {
        var content = miniPage.getHrefContent('/visitorBooksDetail?id='+data.id);
        var index = layer.open({
          title: data.name,
          type: 1,
          shade: 0.2,
          maxmin:true,
          shadeClose: true,
          area: ['85%','75%'],
          content: content,
        });
        $(window).on("resize", function () {
          layer.full(index);
        });
        return false;
      }
    });
    util.event('lay-active', {
      normal: function(){
        $('#demo-box').children().addClass('layui-col-md3').removeClass('layui-col-md4');
        $('#demo-box').find('.layui-menu').removeClass('layui-menu-lg');
      }
      ,lg: function(){
        $('#demo-box').children().addClass('layui-col-md4').removeClass('layui-col-md3')
        $('#demo-box').find('.layui-menu').addClass('layui-menu-lg');
      }
    });
  });

</script>

</body>
</html>